// 获取元素
var phNb = $('phNb')
var stNb = $('stNb')
var tips = $c('tip')
var btns = $c('btn')
// 添加事件
phNb.addEventListener('blur', testPh)
stNb.addEventListener('blur', testSt)
btns[0].addEventListener('click', getForm)
btns[1].addEventListener('click', resetForm)
// 使用事件
setTime()
createBox()
//快速获取该带id得元素
function $(Nid) {
	return document.getElementById(Nid);
}

function $c(NclassName) {
	return document.getElementsByClassName(NclassName)
}

// 验证手机号
function testPh() {
	// 手机号正则验证表达式
	var phRule = /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/;
	console.log(phRule.test(phNb.value))
	if (!phRule.test(phNb.value)) {
		tips[1].style.display = 'block'
		tips[1].style.color = 'red'
	} else {
		tips[1].style.display = 'none'
	}
}
// 验证学号
function testSt() {
	console.log(stNb.value.length)
	if (stNb.value.length != 12) {
		tips[0].style.display = 'block'
		tips[0].style.color = 'red'
	} else {
		tips[0].style.display = 'none'
	}
}

// 设置当前年月日函数
function setTime() {
	var slts = document.getElementsByClassName('slts')
	var today = new Date()
	var totalYear = 100
	console.log(slts)
	// 设置年份
	tyear = parseInt(today.getFullYear())
	console.log(tyear)
	for (let i = totalYear; i >= 0; i--) {
		let year = new Option(tyear - totalYear + i, tyear - totalYear + i)
		slts[0].add(year)
	}
	slts.selectedIndex = 0 //显示当前年
	// 设置年份
	tmonth = parseInt(today.getMonth()) + 1;
	for (var i = 1; i <= 12; i++) {
		b = new Option(i, i)
		slts[1].add(b)
	}
	slts[1].options[tmonth - 1].selected = true; //显示当前月

	//设置日
	tday = parseInt(today.getDate())
	// 获取当月天数
	let d = new Date(tyear, tmonth, 0)
	tdayNum = d.getDate()
	for (let i = 1; i <= tdayNum; i++) {
		day = new Option(i, i)
		slts[2].add(day)
	}
	// 设置默认显示为当前日子
	slts[2].selectedIndex = tday
	// 设置select值改变后得重新渲染
	slts[1].addEventListener('change', function() {
		setDay(slts[1].value, slts)
	})

}
//重新根据当前月份设置日数
function setDay(sMonth, slts) {
	tday = slts[2].value //默认日期
	// 清空原有重新渲染
	slts[2].innerHTML = ''
	//添加日
	console.log(tday)
	// 获取当月天数
	let d = new Date(slts[0].value, sMonth, 0)
	tdayNum = d.getDate()
	for (let i = 1; i <= tdayNum; i++) {
		day = new Option(i, i)
		slts[2].add(day)
	}
	// 设置默认显示为上次选中得日子
	slts[2].selectedIndex = tday - 1
}
// btn获取表单
function getForm() {
	const form = $c('form')
	var str = ''
	console.dir(form)
	// 获取前五项
	for (var i = 0; i < form[0].length; i++) {
		str += form[0][i].value + " "
	}
	// 获取男女
	for (var i = 0; i < form[0].length; i++) {
		if (form[1][i].checked) {
			str += form[1][i].value + ' '
			break
		}
	}
	// 获取籍贯
	console.dir(form[2])
	for (var i = 0; i < form[2].length; i++) {
		str += form[2][i][form[2][i].selectedIndex].value + ' '
		// console.log(form[2][i][0].value)
	}
	// 获取选修课程
	for (var i = 0; i < form[3].length; i++) {
		if (form[3][i].checked) {
			console.log(form[3][i].checked)
			str += form[3][i].value + ' '
		}
	}
	// 获取出生年月
	for (var i = 0; i < form[4].length; i++) {
		str += form[4][i].value + ' '
	}
	console.log(str)
	// 表单内容显示在另一个盒子里
	var show = $('show')
	show.innerText = str
}
// 重置表单内容
function resetForm() {
	const form = $c('form')
	for (var i = 0; i < form.length; i++) {
		form[i].reset()
	}
	// 调用时间设置函数,重置时间
	setTime()
	// 重置提示手机号和email提示信息
	tips[0].style.display = 'none'
	tips[1].style.display = 'none'
}
s
// 生成盒子
function createBox() {
	var showBox = document.createElement('div') //创建dom元素,用于展示获取到的表单信息
	var title = document.createElement('div') //生成showBox元素盒子里的title(信息展示)
	var show = document.createElement('div') //生成元素展示表单信息
	var container = $c('container') //通过id名获取dom元素
	// 设置box的基本属性
	showBox.style.minWidth = '400px'
	showBox.style.padding = '20px 30px'
	showBox.style.boxShadow = ' 0 2px 12px 0 rgba(0, 0, 0, 0.1)'
	title.innerText = '表单信息展示'
	// 给生成的元素赋予类名
	showBox.id = 'showBox'
	show.id = 'show'
	title.className = 'title';
	// 将生成的dom元素插入到页面中
	showBox.appendChild(title)
	showBox.appendChild(show)
	container[0].appendChild(showBox)
}
// // 点击提交后的表单验证

